<template>
    <div ref="scrollDiv" @scroll.passive="handleScroll" class='main-con'>
        <slot></slot>
    </div>
</template>
<script>
export default {
    data () {
        return {
            canLoadMore: true,
            scrollTop: 0
        }
    },
    methods: {
        handleScroll (e) {
            if (!this.canLoadMore) {
                return
            }
			var div = e.target
			var scrollHeight = div.scrollHeight
            var scrollTop = div.scrollTop 
			var clientHeight = div.clientHeight 
            if(scrollHeight == clientHeight){
                return
            }
            if (scrollTop == 0) {
                this.$emit('loadMore')
                this.canLoadMore = false
                setTimeout(() => {
                    this.canLoadMore = true
                }, 1000)
            }
		}
    },
    mounted () {
        this.$refs['scrollDiv'].scrollTop = this.$refs['scrollDiv'].scrollHeight
    }    
}
</script>
<style scoped>
.main-con{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}
</style>
